<template>
  <div class="bar-content">
    <div
      class="bar"
      :style="{
        width: calcWidth
      }"
    >
      <span>{{ barText }}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    percent: {
      type: Number,
      default: 0
    },
    barText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    }
  },
  computed: {
    calcWidth() {
      return `${this.percent.toFixed(2)}%`
    }
  }
}
</script>
<style lang="scss" scoped>
.bar-content {
  width: 100%;
  .bar {
    height: 18px;
    background-color: #1890FF;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: end;
    color: #fff;
    font-size: 12px;
    >span {
      margin-right: 8px;
    }
  }
}
</style>
